<template>
    <div class="container">
      <el-table :data="notifications" style="width: 100%; padding-top: 5px;">
        <el-table-column min-width="100" align="left">
          <template slot="header" slot-scope="scope">
            <div class="header">
              系统通知
            </div>
          </template>
          <template slot-scope="scope">
            <router-link :to="scope.row.url" class="name-column"
              >
              <span class="title flex-1">{{
                scope.row.name
              }}</span></router-link
            >
          </template>
        </el-table-column>
        <el-table-column min-width="100" align="center">
          <template slot="header" slot-scope="scope">
            <span></span>
          </template>
          <template slot-scope="scope">
            <span>{{
                scope.row.state
              }}</span>
          </template>
  
        </el-table-column>
        
      </el-table>
      <section v-show="!notifications.length" class="nodata-container">
      <span>暂无系统通知！</span>
    </section>
    </div>
  </template>
  
  <script>
  import { fetchProjectList } from '@/api/project';
  import { fetchAppropriationList } from "@/api/appropriation";
  import { fetchMachineAppointmentList } from '@/api/machine-appointment';
  
  export default {
    data() {
      return {
        listLoading: true,
        notifications: [],
      };
    },
    created() {
      this.getProjectList();
      this.getAppropriationList();
      this.getMachineAppointmentList();
    },
    filters: {
      convertUTCToGMTString(val) {
        if (!val) return "";
        const currentDate = new Date(val);
        const month =
          currentDate.getMonth() < 9
            ? `0${currentDate.getMonth() + 1}`
            : currentDate.getMonth().toString();
        return `${currentDate.getFullYear()}-${month}-${currentDate.getDate()}`;
      },
    },
    methods: {
      getProjectList() {
        this.listLoading = true;
        fetchProjectList().then((res) => {
          const dataList = res.data
          dataList.forEach((item) => {
            if (item.projectStatus === "项目进行中" && item.projectCheckStatus === "提交项目中检报告") {
                this.notifications.push({name: item.projectName, state: "立项成功", type: '项目', url: `/project/view/${item.id}` });
            } else if (item.projectCheckStatus === "提交项目结项报告") {
                this.notifications.push({name: item.projectName, state: "已通过中检", type: '项目', url: `/project/view/${item.id}` });
            } else if (item.projectStatus === "项目已结项") {
                this.notifications.push({name: item.projectName, state: "已结项", type: '项目' , url: `/project/view/${item.id}`});
            }
          });
          this.listLoading = false;
        });
      },
      getAppropriationList() {
        this.listLoading = true;
        fetchAppropriationList().then((res) => {
          const dataList = res.data
          dataList.forEach((item) => {
            if (item.appropriationState === "已生效") {
                this.notifications.push({name: item.appropriationName, state: "经费条目通过审批",  type: '经费', url: `/appropriation/view/${item.id}` });
            }
          });
          this.listLoading = false;
        });
      },
      getMachineAppointmentList() {
        this.listLoading = true;
        fetchMachineAppointmentList().then((res) => {
          const dataList = res.data
          dataList.forEach((item) => {
            if (item.status === "已批准") {
                this.notifications.push({name: item.machineName, state: "仪器预约已成功",  type: '仪器', url: `/machineappointment/view/${item.id}` });
            }
          });
          this.listLoading = false;
        });
      },
    },
  };
  </script>
  
  <style scoped>
  .container {
    background-color: #fff;
    min-height: 516px;
  }

  .nodata-container {
    text-align: center;
    vertical-align: middle;
    line-height: 350px;
  }

  .title-container {
    display: flex;
    justify-content: space-between;
    padding: 15px 10px 0;
  }
  
  .name-column {
    color: rgb(24, 144, 255);
  
  }
  
  .mr-1 {
    color: orange;
  }
  
    .count {
        color: lightgray;
      }
    .more-link {
        text-align: end;
        color: rgb(24, 144, 255) !important;
      }
  </style>
  